<script setup>
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {searchAchievements} from "@/api/achievement";

const {itemList} = defineProps({
  itemList: Array,
  handleExport: Function,
  handleDownload: Function,
})
//console.log(itemList);
//传递给result当前的itemList
const emit = defineEmits(["selectId"]);
const router = useRouter();

const handleSelectionChange = (selectedItem) => {
  // selectedIds.value = selectedIds
  emit("selectId", selectedItem.map(item => item.id)); //传给父组件
}

const goToInput = () => {
  router.push("/achievement/input");
};

const tableRef = ref(null);
const clearSelection = () => {
  tableRef.value.clearSelection();
}

defineExpose({
  clearSelection
})

</script>
<template>
  <div class="resultItemBox">
    <div class="ButtonBox">
      <el-button type="success" @click="goToInput">录入</el-button>
      <el-button type="success" @click="handleExport">导出</el-button>
    </div>
    <div class="itemList">
      <el-table
          :data="itemList"
          style="width: 100%"
          :header-cell-style="{ background: '#F5F7FA', color: '#9B9EA3' }"
          @selection-change="handleSelectionChange"
          ref="tableRef"
      >
        <!--显示列-->
        <el-table-column type="selection" width="55"/>
        <!--隐藏列-->
        <el-table-column type="expand">
          <template #default="props">
            <div class="hideBox">
              <p><strong>指导老师：</strong>{{ props.row.advisorName }}</p>
              <p><strong>项目简介: </strong>{{ props.row.description }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="achieveTime" label="获取时间" width="120">
        </el-table-column>
        <el-table-column
            prop="title"
            label="项目名称"
            width="320"
        ></el-table-column>
        <el-table-column prop="level" label="项目等级" width="100" align="center">
          <template #default="scope">
            <el-tag>{{ scope.row.level }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="possessorName" label="项目持有者" width=""/>
        <!-- <el-table-column prop="mentorNames" label="指导老师" width="" /> -->
        <el-table-column fixed="right" label="附件" width="70">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleDownload(scope.row.id)"> 下载</el-button>
          </template>
        </el-table-column>
        <template #empty>
          <div class="empty-tip">暂无成果</div>
        </template>
      </el-table>
    </div>
  </div>
</template>
<style scoped lang="less">
.empty-tip {
  text-align: center;
  line-height: 100px;
}

.resultItemBox {
  width: 95%;
  display: flex;
  flex-direction: column;
}

.ButtonBox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin: 20px 0px 10px 0px;

  .checkBox {
    // margin-right:15px;
    margin-left: 15px;
    margin-right: 54px;
  }
}

.itemList {
  width: 100%;
  display: flex;
  flex-direction: column;

  // .resultItem:first-child {
  //   border-top: 1px solid #469db2;
  // }
  // .resultItem {
  //   border-bottom: 1px solid #469db2;
  // }
}

.resultItem {
  padding: 15px 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .leftBox {
    width: 12%;
    border-right: 1px solid #f2e394;
    color: #f2e394;
    display: flex;
    flex-direction: column;
    padding: 10px 0px 10px 0px;

    .day {
      font-size: 30px;
      font-weight: bold;
      text-align: center;
    }

    .yearAndMonth {
      font-size: 16px;
      font-weight: bold;
      text-align: center;
    }
  }

  .rightBox {
    width: 78%;
    padding: 5px 0px 0px 30px;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    line-height: 22px;

    .itemName {
      font-size: 18px;
      margin-bottom: 8px;
    }
  }

  .operateBox {
    // width: 12%;
    width: 10%;
    // border-left: 1px solid #f2e394;
    padding: 0px 10px 6px 18px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .operateTop {
      flex: 1;
      margin-top: 2px;
    }

    .operateBottom {
      margin-top: auto;
    }
  }
}

//隐藏内容
.hideBox {
  margin: 5px 30px;

  p {
    font-size: 15px;
    margin-bottom: 5px;
  }
}
</style>
